<template>
  <div class="login-container">
    <el-card class="login-box">
      <h2 class="login-title">养老院管理系统</h2>
      <el-form :model="loginForm" :rules="rules" ref="loginFormRef">
        <el-form-item prop="username">
          <el-input
            v-model="loginForm.username"
            placeholder="请输入用户名"
            prefix-icon="el-icon-user"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            type="password"
            placeholder="请输入密码"
            prefix-icon="el-icon-lock"
          ></el-input>
        </el-form-item>
        <el-form-item prop="role" class="role-form-item">
          <el-radio-group v-model="loginForm.role" class="role-radio-group">
            <el-radio label="caregiver">护工</el-radio>
            <el-radio label="admin">管理员</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleLogin" class="login-button"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { adminLogin, nurseLogin } from "@/api/request";
import { useRouter } from "vue-router";
import adminRoutes from "@/router/adminRoutes";
const router = useRouter();
const loginForm = ref({
  role: "admin", // 默认选中管理员
  username: "",
  password: "",
});

const rules = ref({
  role: [{ required: true, message: "请选择身份", trigger: "change" }],
  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
});

const loginFormRef = ref(null);

const handleLogin = () => {
  loginFormRef.value.validate(async (valid) => {
    if (valid) {
      // 根据身份显示不同的登录成功消息
      if (loginForm.value.role === "admin") {
        let data = await adminLogin(loginForm.value);
        ElMessage.success("登录成功");

        router.push("/dashboard");
        localStorage.setItem("id", data.data.id);
        localStorage.setItem("role", loginForm.value.role);
        localStorage.setItem("username", loginForm.value.username);
        return;
        // 跳转到管理员首页
      } else if (loginForm.value.role === "caregiver") {
        let data = await nurseLogin(loginForm.value);
        ElMessage.success("护工登录成功");
        localStorage.setItem("id", data.data.id);
        localStorage.setItem("role", loginForm.value.role);
        localStorage.setItem("username", loginForm.value.username);
        router.push("/elder/list");
        return;
        // 跳转到护工首页
        // router.push('/caregiver');
      }
    }
  });
};
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
  position: relative;
  z-index: 1;
}
.login-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../../assets/bg.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.8;
  z-index: -1;
}

.login-box {
  width: 400px;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background-color: rgba(255, 255, 255, 0.9);
}

.login-title {
  text-align: center;
  margin-bottom: 20px;
  color: #c62828;
  font-size: 24px;
  font-weight: bold;
}

.login-button {
  width: 100%;
}

.role-form-item {
  margin-bottom: 20px; /* 调整间距 */
}

.role-radio-group {
  display: flex;
  justify-content: flex-end; /* 靠右对齐 */
  width: 100%;
}

.el-radio {
  margin-left: 10px; /* 调整单选框间距 */
}

:deep(.el-button--primary) {
  background-color: #c62828;
  border-color: #c62828;
}

:deep(.el-button--primary:hover) {
  background-color: #b71c1c;
  border-color: #b71c1c;
}

:deep(.el-radio__input.is-checked .el-radio__inner) {
  background-color: #c62828;
  border-color: #c62828;
}

:deep(.el-radio__input.is-checked + .el-radio__label) {
  color: #c62828;
}
</style>
